.high-speed {
    position   : relative;
    height     : 46px;
    line-height: 46px;
    display    : flex;
}

.high-speed-label {
    text-align: left;
    color     : #888;
    font-size : 15px;
    flex      : 1;
}

.high-speed-switch {
    position  : relative;
    text-align: right;
    flex      : 1;
}

.high-speed-track {
    display         : inline-block;
    position        : relative;
    width           : 50px;
    height          : 30px;
    padding         : 1px;
    border-radius   : 16px;
    background-color: #ccc;
    vertical-align  : middle;
    box-sizing      : border-box;
}

.high-speed-track.checked {
    background-color: #1ba9ba;
}

.high-speed-handle {
    position        : absolute;
    z-index         : 1000;
    top             : 1px;
    left            : 1px;
    width           : 28px;
    height          : 28px;
    border-radius   : 50%;
    background-color: #fff;
    box-shadow      : 0 1px 3px rgba(0, 0, 0, 0.3);
    transition      : transform 0.1s ease-out;
    box-sizing      : border-box;
}

.high-speed-handle.checked {
    transform: translateX(20px);
}

.high-speed-track::after {
    position        : absolute;
    left            : 15px;
    content         : ' ';
    width           : 34px;
    height          : 28px;
    background-color: #fafafa;
    border-radius   : 0 15px 15px 0;
    transition      : transform 0.13s ease-out;
}

.high-speed-track.checked::after {
    transform: scale(0);
}